//Nodejs读取html文件 将里面的css、js代码分割出来
// 只可以使用fs的readfile和writefile方法、path对象的basename、join方法
//并且将两个提取出的文件链接到html文件中

const fs = require('fs')
const path = require('path');

const htmlFilePath = 'clock.html'
const Generator = 'new_clock.html'

// 读取HTML文件
fs.readFile(htmlFilePath, 'utf8', (err, htmlContent) => {
    if (err) {
        console.error('读取HTML文件失败:', err.message);
        return;
    }
    
    const cssData = extractCSSFromHTML(htmlContent);
    const jsData = extractJSFromHTML(htmlContent);

    //console.log(cssData);//测试
    // 写入css文件
    fs.writeFile('extracted-css.css', cssData.embeddedCSS.join('\n'), (err) => {
        if (err) throw err;
        console.log('CSS已保存到文件');
    });
    // 写入js文件
    fs.writeFile('extracted-js.js', jsData.embeddedJS.join('\n'), (err) => {
        if (err) throw err;
        console.log('JS已保存到文件');
    });

    //再将两个外部文件链接回html文件中ß
    const newHtmlContent = htmlContent.replace(
        /<style[^>]*>([\s\S]*?)<\/style>/gi,
        `<link rel="stylesheet" href="${path.basename('extracted-css.css')}">`
    ).replace(
        /<script[^>]*>([\s\S]*?)<\/script>/gi,
        `<script src="${path.basename('extracted-js.js')}"></script>`
    );
    fs.writeFile(Generator, newHtmlContent, (err) => {
        if (err) throw err;
        console.log('HTML已保存到文件');
    });
});
function extractCSSFromHTML(htmlContent) {
    const result = {
        embeddedCSS: [],   
    };

    // 提取<style>标签内容
    const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
    let match;
    while ((match = styleRegex.exec(htmlContent)) !== null) {
        result.embeddedCSS.push(match[1]);
    }
    return result;
}

function extractJSFromHTML(htmlContent) {
    const result = {
        embeddedJS: [],
    };

    // 提取<script>标签内容
    const scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
    let match;
    while ((match = scriptRegex.exec(htmlContent)) !== null) {
        result.embeddedJS.push(match[1]);
    }
    return result;
}